// 引入公用样式
$("header").load("header.html");
$("footer").load("footer.html");






// 轮播图
$("#oImg").hover(function(){
	$(this).css({
		cursor: "pointer"
	})
})
$("#oImg div").click(function(){
	location.href="DetailsPage.html";
})

class Bannder {
	constructor(newOimg, newOli) {
		this.index = 0;
		this.oImg = newOimg;
		this.oLi = newOli;
		this.oImg.style.backgroundImage = "url(img/" + this.index + ".jpg)"
		this.oLi[this.index].style.backgroundColor = "#757575";

	}
	//设置div背景颜色
	setOlimgBackGroundIimg() {
		this.oImg.style.backgroundImage = "url(img/" + this.index + ".jpg)";
	}
	//设置li此时背景颜色的状态
	setLiColor() {
		for (let i = 0; i < oLi.length; i++) {
			if (i == this.index) {
				this.oLi[i].style.background = "#757575"
			} else(
				this.oLi[i].style.backgroundColor = "rgba(0,0,0,.4)"
			)
		}
	}
	//点击下一个按钮
	nextImage() {
		this.index++;
		if (this.index == this.oLi.length) {
			this.index = 0;
		}
		this.setOlimgBackGroundIimg();
		this.setLiColor();
	}
	//点击上一个按钮
	previousImage() {
		this.index--;
		if (this.index == -1) {
			this.index = this.oLi.length - 1;
		}
		this.setOlimgBackGroundIimg();
		this.setLiColor();
	}
	//进行按钮的事件绑定
	eventBindBtn() {
		let btnPrevious = document.getElementById("btn-previous");
		let btnNext = document.getElementById("btn-next")
		let that = this;
		btnPrevious.onclick = function() {
			that.previousImage();
		}

		btnNext.onclick = function() {
			that.nextImage();
		}
	}
	//添加li的事件绑定
	eventBindLi() {
		let that = this;
		for (let i = 0; i < this.oLi.length; i++) {
			this.oLi[i].onclick = function() {
				that.index = i;
				that.setOlimgBackGroundIimg();
				that.setLiColor();
			}
		}
	}
	setTime() {
		this.index = 0;
		let that = this;
		let time = setInterval(function() {
			that.setOlimgBackGroundIimg();
			that.setLiColor();
			that.nextImage();
		}, 5000)
		that.oImg.onmouseover = function() {
			clearInterval(time);
		}
		that.oImg.onmouseout = function() {
			time = setInterval(function() {
				that.setOlimgBackGroundIimg();
				that.setLiColor();
				that.nextImage();
			}, 5000)
		}
	}
}

let oImg = document.getElementById("oImg");
let oUl = document.querySelector(".spot");
let oLi = oUl.children;
let banner = new Bannder(oImg, oLi);

banner.eventBindBtn();
banner.eventBindLi();
banner.setTime();



// 秒杀 倒计时
var presentTimer = new Date();
let presentHours = presentTimer.getHours();
$("#_timer").html(presentHours);


$(document).ready(function() {
	var oDate = new Date();
	var nowTime = oDate.getTime(); //现在的毫秒数
	oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
	var targetDate = new Date(oDate.toLocaleDateString());
	run(targetDate);
});

function run(enddate) {
	getDate(enddate);
	setInterval("getDate('" + enddate + "')", 500);
}

function getDate(enddate) {
	var oDate = new Date(); //获取日期对象

	var nowTime = oDate.getTime(); //现在的毫秒数
	var enddate = new Date(enddate);
	var targetTime = enddate.getTime(); // 截止时间的毫秒数
	var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

	var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
	second = second % 86400; //余数代表剩下的秒数；
	var hour = Math.floor(second / 3600); //整数部分代表小时；
	second %= 3600; //余数代表 剩下的秒数；
	var minute = Math.floor(second / 60);
	second %= 60;
	var spanH = $('.se-txt')[0];
	var spanM = $('.se-txt')[1];
	var spanS = $('.se-txt')[2];

	spanH.innerHTML = tow(hour);
	spanM.innerHTML = tow(minute);
	spanS.innerHTML = tow(second);
}

function tow(n) {
	return n >= 0 && n < 10 ? '0' + n : '' + n;
}



// 小米秒杀右边轮播栏
let buttonNext = document.querySelector(".buttonNext");
let buttonPrev = document.querySelector(".buttonPrev");

 buttonNext.onclick = function(){
		let oUl = document.querySelector(".row-right ul");
		oUl.style.left = oUl.offsetLeft - 992 + "px";
		console.log(oUl.offsetLeft )
		if(oUl.offsetLeft <= -991){
			oUl.style.left = -1968 +"px";
		}	
}

 buttonPrev.onclick = function(){
	
		let oUl = document.querySelector(".row-right ul");
		oUl.style.left = oUl.offsetLeft + 992 + "px";
		if(oUl.offsetLeft >= -992 ){
			oUl.style.left =0+ "px";
			console.log(oUl.offsetLeft )
		}	  
	 
}


$("#1").click(function(){
	localStorage.setItem('id','#1')
})